<template>
  <div class="pages">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 头部 -->
      <van-sticky>
        <Header title="银盛助手">
          <img slot="right" class="intsbv" src="../../../static/images/icon-home-message.png" alt="">
        </Header>
      </van-sticky>
      <!-- 主体 -->
      <div class="iboxs">
        <div class="bg_color">
          <div class="fl">
            <div class="topname">
              <div class="title">历史总收益(元)</div>
              <img @click="admanny" v-if="show" src="../../../static/images/icon-home-hide-off.png" alt="">
              <img @click="admanny" v-if="!show" src="../../../static/images/icon-home-hide-on.png" alt="">
            </div>
            <div class="bottom_bot" v-if="show">{{ stats.totalProfit || 0 }}</div>
            <div class="bottom_bot" v-if="!show">******</div>
          </div>
          <div class="fl">
            <div class="topname">
              <div class="title">预计可提现金额(元)</div>
            </div>
            <div class="bottom_bot">敬请期待</div>
          </div>
        </div>
        <div class="family">
          <div class="u_litit" @click="MerchantsQuery">
            <div class="pic_icon">
              <img src="../../../static/images/icon-home-shcx.png" alt="">
            </div>
            <div class="titlename">商户查询</div>
          </div>
          <div class="u_litit" @click="Shangtenant">
            <div class="pic_icon">
              <img src="../../../static/images/icon-home-shrw.png" alt="">
            </div>
            <div class="titlename">商户入网</div>
          </div>
          <!-- <div class="u_litit" @click="authentication()">
              <div class="pic_icon">
                  <img src="../../../static/images/icon-home-shsm.png" alt="">
              </div>
              <div class="titlename">商户实名</div>
          </div> -->
          <div class="u_litit" v-if="userinfoing.ownerType === 'AGENCY'" @click="teamManagement()">
            <div class="pic_icon">
              <img src="../../../static/images/icon-home-tdgl.png" alt="">
            </div>
            <div class="titlename">团队管理</div>
          </div>
          <div class="u_litit" @click="terminal">
            <div class="pic_icon">
              <img src="../../../static/images/icon-home-zdgl.png" alt="">
            </div>
            <div class="titlename">终端管理</div>
          </div>
        </div>

        <div class="padding_body">
          <!-- 公告 -->
          <div class="announcement">
            <div class="zuobian">
              <img src="../../../static/images/mengnsd.png" alt="">
            </div>
            <div class="youbian">
              <van-notice-bar background="#fff" :scrollable="false">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                  <van-swipe-item v-for="(item,index) in notice" :key="index">
                    <div class="zitibia">{{ item.content }}</div>
                  </van-swipe-item>
                </van-swipe>
              </van-notice-bar>
            </div>
          </div>

          <!-- 今日实时数据 -->
          <!--          <div class="TodaysLiveData">-->
          <!--            <div class="topingheader">-->
          <!--              <div class="titlehead">今日实时数据</div>-->
          <!--              <div class="timerer">更新时间 15:28:11</div>-->
          <!--            </div>-->
          <!--            <div class="shujus">-->
          <!--              <div class="flfl_zuo">-->
          <!--                <div class="textjiaoyu">交易额(元)</div>-->
          <!--                <div class="number">0.00</div>-->
          <!--              </div>-->
          <!--              <div class="flfl_zuo">-->
          <!--                <div class="textjiaoyu">预计收益(元)</div>-->
          <!--                <div class="number">123456</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="Data_timer">-->
          <!--            <div class="topind">-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">交易笔数</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">大额笔数(>1000)</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">笔单价(元)</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div class="topind topinf">-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">总商户数</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">活跃商户数</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--              <div class="data_picke">-->
          <!--                <div class="biaoti">新增商户数</div>-->
          <!--                <div class="nameber_data">1234567</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->

          <!-- 选项卡切换 -->
          <div class="xuanxiangja">
            <div class="xuanxiang_header">
              <div class="iboxclick" @click="activerset(index)" :class="listactive === index ? 'activeser' : ''" v-for="(item, index) in list" :key="index">
                <div class="name_set">{{ item.title }}</div>
                <div :class="listactive === index ? 'xian' : ''"></div>
              </div>
            </div>
<!--            <div class="tongzhitimer">更新时间 15:28:11</div>-->

            <div class="designation">
              <div class="intebs">{{ list[listactive].columnTitle }}</div>
              <div class="intebsf" @click="injiaoyi()">
                <div class="nameubfs">交易金额</div>
                <img v-if="manny === 0" src="../../../static/images/iocn-sort-down.png" alt="">
                <img v-if="manny === 1" src="../../../static/images/iocn-sort-up.png" alt="">
              </div>
              <div class="intebsf" @click="frequency()">
                <div class="nameubfs">交易笔数</div>
                <img v-if="frequencytow === 0" src="../../../static/images/iocn-sort-down.png" alt="">
                <img v-if="frequencytow === 1" src="../../../static/images/iocn-sort-up.png" alt="">
              </div>
              <div class="intebsf" @click="wholesale()">
                <div class="nameubfs">大额笔数</div>
                <img v-if="wholesaletress === 0" src="../../../static/images/iocn-sort-down.png" alt="">
                <img v-if="wholesaletress === 1" src="../../../static/images/iocn-sort-up.png" alt="">
              </div>
            </div>

            <div class="designationsin" v-for="(item, index) in statsSub" :key="index">
              <div class="intebs">{{ item.name }}</div>
              <div class="intebsf">
                <div class="nameubfsfv">{{ item.totalAmount || 0 }}</div>
              </div>
              <div class="intebsf">
                <div class="nameubfsfv">{{ item.totalCount || 0 }}</div>
              </div>
              <div class="intebsf">
                <div class="nameubfsfv">{{ item.overTotalCount || 0 }}</div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </van-pull-refresh>

    <van-tabbar v-model="active" active-color="#3288FF" inactive-color="#4F4F4F">
      <van-tabbar-item icon="setting-o" replace to="/index">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/information">
        <span>数据</span>
        <img slot="icon" slot-scope="props" :src="props.active ? search.actives : search.normals"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/my">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? user.actives : user.normals"/>
      </van-tabbar-item>
    </van-tabbar>

    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options"/>

  </div>
</template>

<script>
import { Toast } from 'vant'
import Vue from 'vue'
import api from '../../api/PublicInterface'
import Header from '../../components/Header'
import { query, querySub } from '../../api/stats'

Vue.prototype.$api = api
export default {
  components: { Header },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
  },
  beforeDestroy() {
    // document.querySelector('body').setAttribute('style', '')
  },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      //首页
      icon: {
        normal: require('../../../static/images/icon-home-def.png'),
        active: require('../../../static/images/icon-home-sel.png')
      },
      //数据
      search: {
        normals: require('../../../static/images/icon-date-def.png'),
        actives: require('../../../static/images/icon-date-sel.png')
      },
      //我的
      user: {
        normals: require('../../../static/images/icon-user-def.png'),
        actives: require('../../../static/images/icon-user-sel.png')
      },
      active: 0,
      // 显示金钱
      show: true,
      // 交易金额
      manny: 0,
      // 交易笔数
      frequencytow: 0,
      // 大额笔数
      wholesaletress: 0,
      listactive: 0,
      count: 0,
      isLoading: false,

      notice: [],//公告
      // 用户信息
      userinfoing: {
        agency: {}
      },
      // 统计相关数据
      stats: {},
      // 下属统计数据
      statsSub: []
    }
  },
  computed: {
    list() {
      const BASE = [{
        title: '商户',
        columnTitle: '商户名称',
        ownerType: 'MERCHANT'
      }]
      if (this.userinfoing) {
        if (this.userinfoing.ownerType === 'AGENCY') {
          return [{
            title: '团队',
            columnTitle: '团队名称',
            ownerType: 'AGENCY_TEAM'
          }, {
            title: '业务经理',
            columnTitle: '业务经理',
            ownerType: 'AGENCY_TEAM_MEMBER'
          }].concat(BASE)
        } else if (this.userinfoing.ownerType === 'AGENCY_TEAM') {
          return [{
            title: '业务经理',
            columnTitle: '业务经理',
            ownerType: 'AGENCY_TEAM_MEMBER'
          }].concat(BASE)
        }
      }
      return BASE
    }
  },
  mounted() {
    this.announcements()  //公告查询 接口
    this.userinfo()
    this.queryStats()
  },
  methods: {
    // 公告查询 接口
    announcements() {
      this.$api.announcements().then((res) => {
        if (res.status === '0000') {
          this.notice = res.payload.content
        } else {
          Toast(res.describe)
        }
      })
    },
    async queryStats() {
      this.stats = await query({ timeType: 'TODAY' })
    },
    /**
     * 查询统计数据
     */
    async queryStatsSub() {
      this.statsSub = await querySub({ timeType: 'TODAY', statisticsType: this.list[this.listactive].ownerType })
    },
    // 获取用户信息接口
    userinfo() {
      this.$api.userinfo().then((res) => {
        if (res.status === '0000') {
          this.userinfoing = res.payload
          // 获取用户成功后查询统计信息,因为拿到成功的数据后才能确定tab的第一个是团队还是成员
          this.queryStatsSub()
        } else {
          Toast(res.describe)
        }
      })
    },
    // 终端管理
    terminal() {
      this.$router.push({ path: '/terminal?userinfoing=' + JSON.stringify(this.userinfoing) })
    },
    // 商户入网
    Shangtenant() {
      this.$router.push({ path: '/Shangtenant?userinfoing=' + JSON.stringify(this.userinfoing) })
    },
    // 商户查询
    MerchantsQuery() {
      this.$router.push({ name: 'MerchantsQuery' })
    },
    // 团队管理
    teamManagement() {
      this.$router.push({ name: 'teamManagement' })
    },
    // 商户实名
    authentication() {
      this.$router.push({ name: 'authentication' })
    },
    onSelect(option) {
      Toast(option.name)
      this.showShare = false
    },
    // 显示金钱
    admanny() {
      this.show = !this.show
    },
    // 交易金额
    injiaoyi() {
      if (this.manny === 0) {
        this.manny = 1
      } else {
        this.manny = 0
      }
    },
    // 交易笔数
    frequency() {
      if (this.frequencytow === 0) {
        this.frequencytow = 1
      } else {
        this.frequencytow = 0
      }
    },
    // 大额笔数
    wholesale() {
      if (this.wholesaletress === 0) {
        this.wholesaletress = 1
      } else {
        this.wholesaletress = 0
      }
    },
    activerset(index) {
      this.listactive = index
      this.stats = []
      this.queryStatsSub()
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    }
  }
}
</script>

<style scoped>
page {
  background: rgb(245, 245, 245);
}

.pages {
  width: 100%;
  background: rgb(245, 245, 245);
}

.iboxs {
  width: 100%;
  /* margin-bottom: 54px; */
}

.bg_color {
  width: 100%;
  background: #3288FF;
  padding: 33.5px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bg_color > .fl {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.bg_color > .fl > .topname {
  display: flex;
  align-items: center;
}

.bg_color > .fl > .topname > .title {
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 15px;
  letter-spacing: 0px;
}

.bg_color > .fl > .topname > img {
  width: 24px;
  height: 24px;
  margin-left: 11px;
}

.bottom_bot {
  color: #FFFFFF;
  font-family: DIN;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 0px;
  margin-top: 16px;
}

.family {
  width: 100%;
  padding: 15.5px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
}

.u_litit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.u_litit > .pic_icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(-139.16deg, #59AFFF 0%, #1C7BFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.u_litit > .pic_icon > img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.u_litit > .titlename {
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 13px;
  letter-spacing: 0px;
  margin-top: 10px;
}

.padding_body {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.announcement {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background: #FFFFFF;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.zuobian {
  width: 48px;
  height: 24px;
  display: flex;
  align-items: center;
}

.zuobian > img {
  width: 100%;
  height: 100%;
}

.youbian {
  width: 85%;
  overflow: hidden;
}

.van-notice-bar {
  width: 100%;
}

.notice-swipe {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.zitibia {
  color: #4F4F4F;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.TodaysLiveData {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 4px 4px 0px 0px;
  background: #F6FAFF;
}

.topingheader {
  width: 100%;
  height: 40px;
  display: flex;
  border-bottom: 1px solid #F2F2F2;
  align-items: center;
}

.titlehead {
  color: #333333;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 16px;
  letter-spacing: 0px;
}

.timerer {
  margin-left: 16px;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 12px;
  letter-spacing: 0px;
}

.shujus {
  width: 100%;
  padding: 17px 0 25px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.flfl_zuo {
  width: 50%;
}

.textjiaoyu {
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.number {
  color: #333333;
  font-family: DIN;
  font-weight: bold;
  font-size: 24px;
  margin-top: 8px;
}

.Data_timer {
  width: 100%;
  border-radius: 0px 0px 4px 4px;
  background: #FFFFFF;
  padding: 16px;
  box-sizing: border-box;
}

.topind {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topinf {
  margin-top: 16px;
}

.data_picke {
  width: 33.33%;
}

.data_picke:nth-child(2) {
  width: 40%;
}

.data_picke:nth-child(3) {
  width: 23.67%;
}

.data_picke > .biaoti {
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.data_picke > .nameber_data {
  color: #333333;
  font-family: DIN;
  font-weight: regular;
  font-size: 18px;
  letter-spacing: 0px;
  margin-top: 8px;
}

.xuanxiangja {
  width: 100%;
  border-radius: 4px;
  background: #FFFFFF;
  margin-top: 16px;
  margin-bottom: 54px;
}

.xuanxiang_header {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
  /* padding: 0 16px;
  box-sizing: border-box; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.iboxclick {
  width: 33.33%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.name_set {
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 16px;
}

.xian {
  width: 80px;
  height: 4px;
  background: #3288FF;
  position: absolute;
  bottom: 0;
}

.activeser {
  color: #333333 !important;
  font-family: OPPOSans;
  font-weight: bold !important;
  font-size: 16px;
}

.tongzhitimer {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 12px;
  text-align: center;
  padding: 0 16px;
  box-sizing: border-box;
}

.designation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: #F9FAFF;
  padding: 0 16px;
  box-sizing: border-box;
}

.intebs {
  width: 20.8%;
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intebsf {
  width: 26%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intebsf > img {
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.designationsin {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: #fff;
  padding: 0 16px;
  box-sizing: border-box;
}

.nameubfsfv {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
</style>
